import React, {useState, useEffect} from 'react'

import {Container} from './style'

import { Button, Input, Table, Space, message, Modal, Form, AutoComplete} from 'antd'

import moment from 'moment'

import FeedbackRequest from '../../../../request/feedback_request'

const feedback_request = new FeedbackRequest()

function FeedbackAdmin(){
    const [modalLoading, setModalLoading] = useState(false)
    const [form] = Form.useForm()
    const fbTypeList = {
        '1' : '小站建议',
        '2' : 'BUG反馈',
        '3' : '特殊需求',
        '4' : '其他'
    }
    const statusList = {
        '1' : '未处理',
        '2' : '已忽略',
        '3' : '已接受',
        '4' : '已处理'
    }
    let fbTypeListFilter = []
    for (const key in fbTypeList) {
        fbTypeListFilter.push({
            text: fbTypeList[key],
            value: key
        })
    }

    let statusListFilter = []
    for (const key in statusList) {
        statusListFilter.push({
            text: statusList[key],
            value: key
        })
    }

    const layout = {
        labelCol: { span: 6 },
        wrapperCol: { span: 16 },
    }
    let tableColunm = 
        [
            {
                title: '序号',
                key: 'number',
                width: 60,
                render: (text, record, index) => {
                    return index + 1
                }
            },
            {
                title: '反馈类型',
                key: 'type',
                render: (text, record) => {
                    return fbTypeList[record.type]
                },
                width: 120,
                filters: fbTypeListFilter,
                onFilter: (value, record) => record.type.indexOf(value) === 0,
            },
            {
                title: '状态',
                key: 'status',
                render: (text, record) => {
                    return statusList[record.status]
                },
                defaultFilteredValue: ['1', '3'],
                width: 120,
                filters: statusListFilter,
                onFilter: (value, record) => record.status.indexOf(value) === 0,
            },
            {
                title: '反馈时间',
                key: 'createdate',
                width: 160,
                sorter: (a, b) => a.createdate - b.createdate,
                render: (text, record) => {
                    return moment(Number(record.createdate)).format('YYYY-MM-DD HH:mm:ss')
                }
            },
            {
                title: '反馈内容', // 需要限制字数
                key: 'content',
                dataIndex: 'content',
            },
            {
                title: '操作',
                key: 'action',
                width: 200,
                render: (text, record) => (
                    <Space>
                        <Button type="primary" disabled={record.status === '4'} size="small" danger onClick={() => updateFeedbackStatus('2', record.id)}>忽略</Button>
                        <Button type="primary" disabled={record.status === '4'} size="small" onClick={() => updateFeedbackStatus('3', record.id)}>接受</Button>
                        <Button type="primary" size="small" ghost onClick={() => handleFeedback(record)}>查看处理</Button>
                    </Space>
                ),
            },
        ]
     //表格结构
    const [tableData, setTableData] = useState([]) //表格数据

    const [keyword, setKeyword] = useState('')

    const [visible, setVisible] = useState(false)

    const [currentObj, setCurrentObj] = useState('')

    useEffect(() => {
        getFeedbackList()
    }, [])

    const handleFeedback = (obj) => {
        setCurrentObj(obj)
        
        setTimeout(() => {
            setVisible(true)

            form.setFieldsValue({
                reply: obj.reply || ''
            })
        }, 0)
    }

    const getFeedbackList = () => {
        feedback_request.getFeedbackList({
            email: keyword
        }).then(res => {
            setTableData(res.map((item, index) => {
                return {
                    ...item,
                    key: index
                }
            }))
        })
    }

    const updateFeedbackStatus = (status, id) => {
        feedback_request.updateFeedbackStatus({
            status,
            id
        }).then(res => {
            message.success(statusList[status])
            getFeedbackList()
        })
    }
    
    const confirmModal = () => {
        setModalLoading(true)
        if(form.getFieldValue('reply')){
            feedback_request.updateFeedbackStatus({
                status: '4',
                id: currentObj.id
            }).then(res => {
                feedback_request.replyFeedback({
                    id: currentObj.id,
                    reply: form.getFieldValue('reply')
                }).then(res => {
                    message.success(statusList['4'] + '并回复')
                    setModalLoading(false)
                    setVisible(false)
                    getFeedbackList()
                })
            })
        }else{
            feedback_request.updateFeedbackStatus({
                status: '4',
                id: currentObj.id
            }).then(res => {
                message.success(statusList['4'])
                setModalLoading(false)
                setVisible(false)
                getFeedbackList()
            })
        }
    }

    const closeModal = () => {
        setVisible(false)
        form.resetFields()
    }
    return (
        <Container>
            <div className="top">
                <Space>
                    <Input placeholder="请输入反馈用户邮箱" style={{ width: 200 }} value={keyword} allowClear onChange={(e) => setKeyword(e.target.value)} onPressEnter={getFeedbackList}></Input>
                    <Button type="primary" onClick={getFeedbackList}>查询反馈</Button>
                </Space>
            </div>
            <div className="bottom">
                <Table columns={tableColunm} pagination={{showSizeChanger: true, showTotal: (total) => `共 ${total} 条`}} dataSource={tableData} />
            </div>
            <Modal
                title="查看处理反馈"
                visible={visible}
                okText="标记已处理并回复"
                maskClosable={false}
                onCancel={closeModal}
                footer={[
                    <Button key="reply" type="primary" disabled={currentObj.status === '4'} loading={modalLoading} onClick={confirmModal}>
                        标记已处理并回复
                    </Button>
                ]}
            >
                <Form
                    form={form}
                    {...layout}
                >
                    <Form.Item
                        label="反馈类型"
                    >
                        <span>{fbTypeList[currentObj.type]}</span>
                    </Form.Item>
                    <Form.Item
                        label="反馈内容"
                    >
                        <span>{currentObj.content}</span>
                    </Form.Item>
                    <Form.Item
                        label="相关附图"
                    >
                        {
                            currentObj.image ? 
                            <img style={{maxWidth: '100%', maxHeight: '200px', objectFit: 'contain'}} src={currentObj.image} alt=""/>
                            : '无'
                        }
                    </Form.Item>
                    <Form.Item
                        label="邮件通知用户"
                        name="reply"
                    >
                        <AutoComplete
                            disabled={currentObj.status === '4'}
                            options={[
                                {value: '您的反馈意见已被采纳，将在近期进行整改，再次表示感谢！'},
                                {value: '您的反馈意见已被管理员收集，将根据实际情况进行整改，再次表示感谢！'},
                                {value: '您的反馈意见因诸多限制暂无法采纳，再次表示感谢！'},
                                {value: '再次感谢您对本站的大力支持！^_^'}
                            ]}
                        >
                            <Input.TextArea allowClear disabled={currentObj.status === '4'} style={{width: '100%'}} placeholder="非必填" rows={3}/>
                        </AutoComplete>
                    </Form.Item>
                    <Form.Item
                        label="处理状态"
                    >
                        <span>{statusList[currentObj.status] + ' [' + moment(Number(currentObj.updateDate)).format('YYYY-MM-DD HH:mm:ss') + ']'}</span>
                    </Form.Item>
                </Form>
            </Modal>
        </Container>
    )
}

export default FeedbackAdmin